<template>
  <div style="">
    <p style="padding: 9px 12px">
      <strong font>宿舍:</strong>&emsp;{{personInfo.address.school}} -> {{personInfo.address.area}} -> {{personInfo.address.buliding}} ->
      <font style="color: #f64d3a">{{personInfo.address.dormitory}}</font>
    </p>
    <p style="font-size: 12px; text-align: center; padding-bottom: 4px;">欢迎您，
      <font style="color: #f64d3a">{{personInfo.name}}</font>。</p>
    <el-table :data="goodsList" border show-summary height="270" style="width: 100%">
      <el-table-column prop="number" label="编号" align="center" width="60">
      </el-table-column>
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column prop="discount" label="单价" align="center" width="50">
      </el-table-column>
      <el-table-column prop="surplus" label="剩余" align="center" width="50">
      </el-table-column>
      <el-table-column label="操作" width="90" align="center">
        <template slot-scope="scope">
          <el-button @click="checkNumber(scope.row)" type="text" size="small">核对</el-button>
          <el-button type="text" size="small" @click="addGoods(scope.row)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 9px 0;">
      <el-select v-model="selectGoods" placeholder="请选择" style="width: 40%; margin: 0 4%;">
        <el-option v-for="item in allGoods" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-button type="primary" @click="newGoods" round style="width: 40%; margin: 0 4%;">新增商品</el-button>
    </div>
    <el-table v-if="checkInfoList.length > 0" :data="checkInfoList" style="width: 100%; margin-top: 25px;">
      <el-table-column prop="goodsName" label="名称">
      </el-table-column>
      <el-table-column prop="surplus" label="核对前" width="80" align="center">
      </el-table-column>
      <el-table-column prop="checkSurplus" label="核对后" width="80" align="center">
      </el-table-column>
      <el-table-column prop="loss" label="亏损" width="80" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Scroll from '@/base/scroll'
import axios from '@/api/axiosApi'
import { MessageBox, Toast } from 'mint-ui'

export default {
  data () {
    return {
      personInfo: {
        address: {},
        name: ''
      },
      goodsList: [],
      allGoods: [],
      selectGoods: '',
      checkInfoList: []
    }
  },
  created () {
    console.log(this.$route.query)
    this._getGoodsList()
    this._getPersonInfo()
    this._getCheckInfo()
  },
  components: {
    Scroll
  },
  methods: {
    _getPersonInfo () {
      const dormitoryId = this.$route.query.dormitoryId
      const openId = localStorage.getItem('openId')
      axios.post('/snacks/person', {
        dormitoryId: dormitoryId,
        openId: openId
      }, (data) => {
        this.personInfo = data
      })
    },
    _getGoodsList () {
      const dormitoryId = this.$route.query.dormitoryId
      const _self = this
      axios.get('/snacks/goods', {
        dormitoryId: dormitoryId
      }, (data) => {
        data.forEach(item => {
          item.discount = (item.discount / 100).toFixed(2)
        })
        _self._getAllGoods()
        this.goodsList = data
      })
    },
    _getAllDormitory () {
      // const _self = this
      axios.post('/snacks/getDormitory', null, (data) => {
        console.log(data)
      })
    },
    _getCheckInfo () {
      const _self = this
      axios.get('/snacks/getCheckInfo', {
        dormitoryId: _self.$route.query.dormitoryId
      }, (data) => {
        data.forEach(item => {
          item.loss = item.loss / 100
        })
        _self.checkInfoList = data
      })
    },
    _getAllGoods () {
      const _self = this
      axios.get('/goods/findGoods', null, (data) => {
        _self.goodsList.forEach(item1 => {
          const findIndex = data.findIndex(item2 => item1.id === item2.id)
          if (findIndex > -1) {
            data.splice(findIndex, 1)
          }
        })
        _self.allGoods = data
      })
    },
    checkNumber (goods) {
      const _self = this
      MessageBox.prompt('系统统计剩余' + goods.surplus, goods.name, {
        closeOnClickModal: false,
        inputPlaceholder: '该零食实际剩余量',
        inputType: 'number',
        confirmButtonText: '核对'
      }).then(({ value, action }) => {
        if (value !== null) {
          axios.post('/snacks/checkLoss', {
            goodsId: goods.id,
            dormitoryId: _self.$route.query.dormitoryId,
            realSurplus: value
          }, (data) => {
            _self.goodsList.forEach(item => {
              if (item.id === goods.id) {
                item.surplus = value
                _self._getCheckInfo()
                Toast('核对 ' + goods.name + ' 成功')
              }
            })
          })
        } else {
          Toast('请输入...')
        }
      }).catch(() => { })
    },
    addGoods (goods) {
      const _self = this
      if (typeof goods.surplus === 'undefined') {
        goods.surplus = 0
      }
      MessageBox.prompt('系统统计剩余' + goods.surplus, goods.name, {
        closeOnClickModal: false,
        inputPlaceholder: '请输入添加的数量',
        inputType: 'number',
        confirmButtonText: '添加'
      }).then(({ value, action }) => {
        if (value !== null) {
          axios.post('/stock/addOrUpdate', {
            goodsId: goods.id,
            dormitoryId: _self.$route.query.dormitoryId,
            addNum: parseInt(goods.surplus) + parseInt(value)
          }, (data) => {
            _self.goodsList.forEach(item => {
              if (item.id === goods.id) {
                _self._getGoodsList()
                Toast('添加 ' + goods.name + ' 成功')
                return 0
              }
            })
          })
        } else {
          Toast('请输入...')
        }
      }).catch(() => {})
    },
    newGoods () {
      const findIndex = this.allGoods.findIndex(item => item.id === this.selectGoods)
      if (findIndex > -1) {
        this.addGoods(this.allGoods[findIndex])
      } else {
        Toast('请选择零食')
      }
    }
  }
}
</script>

<style>
.el-table th {
  padding: 0;
}
</style>
<style lang="stylus" scoped>
</style>
